<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		<div id="app">
			<h1>前后端调用测试</h1>
		</div>
		
		<!-- 1.完成前后端远程调用 -->
		<!-- 1.1 引入js函数 -->
		<script src="../js/axios.js"></script>
		<script>
			
			//1. 动态获取用户列表信息 axios.get(url地址,提交的参数)
			let url1 = "http://localhost:8090/findAll"
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise)
					 /* 获取服务器返回值数据 */
					 console.log(promise.data)
				 })
			
			//2. 根据id动态获取用户信息
			let id = 3
			let url2 = "http://localhost:8090/findUserById?id="+id
			axios.get(url2)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
			//3. 多参数的Get请求. 如果是多个参数可以考虑封装为对象
			let user3 = {age: 18, sex: "女"}
			let url3 = "http://localhost:8090/findUserByAS" 
			// GET请求传递对象 使用 {params: 对象参数}
			axios.get(url3,{params: user3})
				 .then(function(promise){
					 console.log(promise.data)
				 })
				 
			/**
			 * 4. 实现数据修改操作
			 * 4.1 请求路径  必须使用restFul结构
			 * 4.2 前端知识点: 模板字符串  
			 * 			语法:  ``    反引号
			 * 			作用:  1.   保留代码片段的格式
			 *                 2.  可以动态取值  ${key}
			 */
			let html = `
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
						`
			let user4 = {id: 1,name: "黑熊精",age: 3000,sex: "男"}
			let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
			axios.put(url4)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
		
		
	</body>
</html>